<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../static/css/reset.css">
    <link rel="stylesheet" type="text/css" href="../static/css/demo.css">
</head>

<body>
    <div class="search-tickets">
        <div class="select-box">
            <div class="place">
                <div class="from">
                    <span class="title">出发地<br><i>From</i></span>
                    <input type="text" name="" value="北京" id="fromCity">
                </div>
                <i id="transform" class="transform"></i>
                <div class="to">
                    <span class="title">到达地<br><i>To</i></span>
                    <input type="text" name="" value="上海" id="toCity">
                </div>
                <div id="cityPicker" class="city-picker">
                    <i id="closeCityPicker" class="close"><img src="../static/image/close.png" width="20" alt=""></i>
                    <ul class="option-title clearfix">
                        <li>热门</li>
                        <li>ABCDE</li>
                        <li>FGHIJ</li>
                        <li>KLMNO</li>
                        <li>PQRST</li>
                        <li>UVWXYZ</li>
                    </ul>
                    <div class="option-content">
                        <div id="hot" class="hot">
                        </div>
                    </div>
                </div>
            </div>
            <div class="date">
                <div class="set-out-date">
                    <span class="title">出发日期<br><i>Set&nbsp;out&nbsp;Date</i></span>
                    <input id="setOutDate" type="text" name="" value="2016-10-01 星期一">
                    <i class="date-btn prev"></i>
                    <i class="date-btn next"></i>
                </div>
                <div class="return-date disabled">
                    <span class="title">返程日期<br><i>Return&nbsp;Date</i></span>
                    <input id="returnDate" type="text" name="" value="2016-10-03 星期三" disabled>
                </div>
            </div>
            <div class="other-tickets-wrap">
                <div class="other-tickets">返程票
                    <input type="checkbox" id="isReturn">
                </div>
                <div class="other-tickets">学生票
                    <input type="checkbox">
                </div>
            </div>
        </div>
        <ul class="tickets-info">
            <li>席别</li>
            <li>列车类型</li>
            <li>出发时间</li>
            <li>乘车人</li>
        </ul>
        <button id="searchBtn" class="search-btn">查询车票</button>
        <table id="ticketsTable" class="tickets-list" cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>车次</th>
                    <th><span>出发站</span><span>到达站</span></th>
                    <th><span>出发时间</span><span>到达时间</span></th>
                    <th>历时</th>
                    <th>商务座</th>
                    <th>特等座</th>
                    <th>一等座</th>
                    <th>二等座</th>
                    <th>高级软卧</th>
                    <th>软卧</th>
                    <th>硬卧</th>
                    <th>软座</th>
                    <th>硬座</th>
                    <th>无座</th>
                    <th>其他</th>
                    <th class="last-child">购买</th>
                </tr>
                <tr id="loading">
                    <td colspan="16" rowspan="16" headers=""><img src="../static/image/loading.gif" width="20" alt=""></td>
                </tr>
            </thead>
        </table>
    </div>
    <script src="../static/js/calendar.js"></script>
    <script src="../static/js/tickets.js"></script>
    <script type="text/javascript">
        var calendar = new Calendar('setOutDate', true);
        // function showCalendar() {
        //     calendar.show();
        // };
        // document.getElementById('setOutDate').addEventListener('focus', showCalendar, false);
        //document.getElementById('searchBtn').addEventListener('click', onreadystatechange, false);
    </script>
    <script type="text/javascript">
    // 出发地、到达地转换
    function transformCity() {
        var fromCity = document.getElementById('fromCity').value;
        var toCity = document.getElementById('toCity').value;
        document.getElementById('toCity').value = fromCity;
        document.getElementById('fromCity').value = toCity;
    }
    // 查询车票
    // function searchTickets() {
    //     var fromCity = document.getElementById('fromCity').value;
    //     var message = '';
    //     var setOutDate = document.getElementById('setOutDate').value;
    //     var returnDate = document.getElementById('returnDate').value;
    //     var isReturn = document.getElementById('isReturn').checked;
    //     message = "出发日期：" + setOutDate;
    //     if (isReturn) {
    //         message = message + "返程日期：" + returnDate;
    //     }
    //     if (fromCity == "北京") {
    //         message = message + ' 没有票';
    //     } else if (fromCity == "上海") {
    //         message = message + ' 还有一张';
    //     }
    //     alert(message);
    // }
    // 常去地点
    function hotPlace() {
        var hotPlace = new Array();
        hotPlace = ['北京', '上海', '天津', '重庆', '长沙', '长春', '成都', '福州', '广州', '贵阳', '呼和浩特', '哈尔滨', '合肥', '杭州', '海口', '济南', '昆明', '拉萨', '兰州', '南宁', '南京', '南昌', '沈阳', '石家庄', '太原', '乌鲁木齐', '武汉', '西宁', '西安', '银川', '郑州', '深圳', '厦门'];
        var contentStr = '';
        for (i = 0; i < hotPlace.length; i++) {
        	contentStr += '<a href="javascript:;">' + hotPlace[i] + '</a>';
        	if( i!=0 && i%7==0 ) {
        		contentStr += '<br/>';
        	}
        }
        return contentStr;
    }
    document.getElementById('hot').innerHTML = hotPlace();
    // 显示城市列表
    function showCityPicker(event) {
        if(event.target.id == 'fromCity') {
            document.getElementById('cityPicker').style.display = "block";
            document.getElementById('cityPicker').style.left = "5px";
        } else if(event.target.id == 'toCity') {
            document.getElementById('cityPicker').style.display = "block";
            document.getElementById('cityPicker').style.left = "213px";
        }
    }
    // function topCityPicker() {
    //     document.getElementById('cityPicker').style.display = "block";
    //     document.getElementById('cityPicker').style.left = "213px";
    // }
    // 得到城市
    function getCity(event) {
        if(event.target.tagName == "A") {
            var cityName = event.target.innerHTML;
            document.getElementById('fromCity').value = cityName;
        }
    }
    // 关闭cityPicker
    function closeCityPicker() {
        document.getElementById('cityPicker').style.display = 'none';
    }
    document.getElementById('fromCity').addEventListener('focus', showCityPicker, false);
    document.getElementById('toCity').addEventListener('focus', showCityPicker, false);
    document.getElementById('cityPicker').addEventListener('click', getCity, false);
    //document.getElementById('searchBtn').addEventListener('click', searchTickets, false);
    document.getElementById('transform').addEventListener('click', transformCity, false);
    document.getElementById('closeCityPicker').addEventListener('click', closeCityPicker, false);
    </script>
</body>

</html>
